<template>
  <img :src='bgImg' class='login-bg'></img>
  <div style='z-index: 10;'>
    <el-form
      class="login-form"
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      :size="formSize"
      status-icon
    >
      <el-row class="login-form-content">
<!--        <div style='margin-right: 20px;height: 50px;'><img :src='logoImg' style='height: 100%;'/></div>-->
        <div style='height: 50px;line-height: 50px;'>健身管理系统</div>
      </el-row>
      <el-row style="margin: 30px; display: flex; justify-content: center">
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            style="width: 240px"
            placeholder="请输入用户名"
          />
        </el-form-item>
      </el-row>
      <el-row style="margin: 30px; display: flex; justify-content: center">
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            style="width: 240px"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-row>
      <el-row style="margin-top: 20px; display: flex; justify-content: center">
        <el-form-item style="text-align: center">
          <el-button
            style="text-align: center; width: 120px"
            type="primary"
            size="large"
            @click="submitForm"
          >
            登录
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
  <Verify
    @success="doLogin"
    :mode="'pop'"
    :captchaType="'blockPuzzle'"
    :imgSize="{ width: '330px', height: '155px' }"
    ref="verify"
  ></Verify>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
import type { FormInstance, FormRules } from 'element-plus'
import Verify from '@/components/verifition/Verify.vue'
import {login} from '@/api/auth'
import {useUserStore} from '@/stores/user'
import { Message } from '@element-plus/icons-vue'
// import logoImg from '../assets/logo.png'
import bgImg from '../assets/bg4.jpg'
import storage from '@/utils/storage'
import { getUserInfo } from '@/api/sys/user'

interface RuleForm {
  username: string
  password: string
  captchaVO: object
}

const formSize = ref('default')

const ruleFormRef = ref<FormInstance>()

const router = useRouter();

const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
  captchaVO: {}
})

const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})

/**
 * 获取验证码
 */
const verify = ref({})
const refreshCaptcha = () => {
  verify.value.show()
}

let isSubmit = false

const submitForm = () => {
  if (!verify || !verify.value || !verify.value.show) {
    return
  }
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      verify.value.show()
    }
  })
}

const userStore = useUserStore();
const doLogin = (verifyResult: any) => {
  if (isSubmit) {
    return
  }
  ruleForm.captchaVO = verifyResult
  login(ruleForm).then((resp: any) => {
    if(resp.code === '00000'){
      isSubmit = true
      storage.setItem("accessToken",resp.data)
      getUserInfo().then(res => {
        const user = res.data
        storage.setItem("user",JSON.stringify(user))
        router.push({path: '/dashboard'})
      })
    }

  }).catch((resp)=>{
    Message.error(resp);
  })
}
</script>
<style scoped>
.login-form {
  /* min-height: 50vh; */
  /* display: flex; */
  /* align-items: center; */
  width: 500px;
  height: 35vh;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10px;
  box-shadow:
    rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
/*.main{
  margin: 0;
  background: url() no-repeat;
  background-size: 100% 100%;
  background-attachment:fixed;
}
!*body {*!
!*  background-color: rgb(212, 232, 240) !important;*!
!*}*!*/

.login-form-content{
  flex-direction: row;
  margin-top: 25px;
  display:flex;
  justify-content: center;
  color: #2f2424;
  font-size: 20px;
  font-weight: 900;
  height: 50px;
  z-index: 9
}

.login-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1
}

</style>
